/*
 * @Description: 搜索
 * @Author: YWJ 
 * @Date: 2022-04-22 00:31:48 
 * @Last Modified by: YWJ
 * @Last Modified time: 2022-05-15 12:40:39
 */

<template>
  <div class="me-ct-body">
    <el-container class="me-ct-container">
      <el-main>
        <div class="me-ct-title me-area">
          <div> 
            <el-image style="width: 300px; height: 90px" src="/img/logo.png">
            </el-image>
          </div>
          <div style="margin-top: 0px; margin-left: 400px; width: 600px">
            <el-input
              placeholder="请输入内容"
              v-model="kw"
              class="input-with-select"
            >
              <el-select v-model="select" slot="prepend" placeholder="请选择">
                <el-option label="按标题" value="1"></el-option>
                <el-option label="按内容" value="2"></el-option>
                <el-option label="按作者" value="3"></el-option>
              </el-select>
              <el-button
                slot="append"
                icon="el-icon-search"
                @click="search"
              ></el-button>
            </el-input>
          </div>
        </div>

        <div class="me-ct-articles">
          <article-scroll-page
            :select="scrollPageselect"
            :pageKw="scrollPagekw"
          >
            v-bind="article"></article-scroll-page
          >
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import ArticleScrollPage from "@/components/common/ArticleScrollPage";
import ArticleScrollPageSearch from "@/components/common/ArticleScrollPageSearch";
import { getTagDetailsById } from "@/api/tag";
import global from "@/global/global";
export default {
  data() {
    return {
      queryTagId: null,
      kw: "",
      select: "1",
      scrollPageselect: "",
      scrollPagekw: "",
    };
  },
  methods: {
    search() {
      console.log("click");
      this.scrollPageselect = this.select;
      this.scrollPagekw = this.kw;
    },
  },
  created() {},
  components: {
    "article-scroll-page": ArticleScrollPageSearch,
  },
};
</script>

<style>
.me-ct-body {
  margin: 60px auto 140px;
  min-width: 100%;
}

.el-main {
  padding: 0;
}

.me-ct-title {
  text-align: center;
  height: 130px;
  padding: 20px;
}

.me-ct-picture {
  width: 60px;
  height: 60px;
}

.me-ct-name {
  font-size: 28px;
  margin-top: 10px;
}

.me-ct-meta {
  font-size: 12px;
  color: #969696;
}

.me-ct-articles {
  width: 640px;
  margin: 30px auto;
}

.el-select .el-input {
  width: 130px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
</style>